<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- css样式表 -->
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/rate/rateSearch.css">
    <link rel="stylesheet" href="../../inc/include.css">

    <!-- js -->
    <script src="../../lib/zepto/zepto.js"></script>
    <script src="../../js/rateSearch.js"></script>
    <script src="../../js/htmlFont.js"></script>
    <script src="../../lib/template/template.js"></script>
    <title>Document</title>
</head>

<body>
    <header>
        <div class="header-top">
            <img src="../../images/header_logo.png" alt="">
            <img src="../../images/header_app.png" alt="">
        </div>
        <div class="header-footer">
            <input type="text" class="ipt" placeholder="请输入你想比价的商品">
            <a href="javascript:;">搜索</a>
        </div>
        <div class="kong"></div>
    </header>
    <div class="view">
        <div class="lk_rsTitle">
            <ul>

            </ul>
        </div>
        <footer>
            <div class="footer-top">
                <ul>
                    <li>登录</li>
                    <li>注册</li>
                    <li class="go">返回顶部</li>
                </ul>
            </div>
            <div class="footer-footer">
                <div class="shouji">
                    <a href="javascript:;">手机APP下载</a>
                    <a href="javascript:;"> 慢慢买手机版</a>
                    <a href="javascript:;">-掌上比价平台</a>
                </div>
                <a href="javascript:;">m.mammambuy.com</a>

            </div>
        </footer>
    </div>
</body>

</html>
<!-- 列表模板 -->
<script type="text/template" id="resTitleList">
    {{each result as val key}}      
        <li>
            <input type="hidden" id="titleid" name="titleid" value="{{val.titleId}}">
            <span>{{val.title}}</span>
            <div class="lk_rsList">
                
            </div>
        </li>
    {{/each}}
</script>
<!-- 列表内部模板 -->
<script type="text/template" id="resListTem">
    {{each result as val key}}
        <a href="goodList.html?categoryId={{val.categoryId}}">
            {{val.category}}
        </a>
    {{/each}}
</script>
<script>
    // 渲染页面
    $.ajax({
        type: "get",
        url: "http://193.112.55.79:9090/api/getcategorytitle",
        dataType: "json",
        success: function (result) {
            // console.log(result);
            var htmlStr = template("resTitleList", result);
            // console.log(htmlStr);
            $(".lk_rsTitle ul").html(htmlStr);
        }
    })

    // 列表内部
    $(".lk_rsTitle").on("tap", "span", function () {
        $(this).siblings('.lk_rsList').toggleClass("lk_rsactive");
        var titleid = $(this).siblings("#titleid").val();
        $.ajax({
            type: "get",
            url: "http://193.112.55.79:9090/api/getcategory",
            data: {
                titleid: titleid
            },
            dataType: "json",
            success: function (result) {
                console.log(result);
                var htmlStr = template("resListTem", result);
                // 添加模板
                $(".lk_rsList").html(htmlStr);
            }

        })
    })

    
</script>